// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'


import HelloCls from './component/HelloCla'

// 引入css文件
import "./index.css"


// 有状态组件和无状态组件
// 函数组件又叫做无状态组件 类组件又做作有状态组件
// 状态(state) 即数据
//函数组件没有自己的状态,只负责数据展示(静态)
//类组件有自己的状态,负责更新UI 让页面 "动" 起来

// function App() {
//     function handlerClick(e) {
//         e.preventDefault();
//         //阻止浏览器 默认行为
//         alert('这是单击处理程序')
//     }
//     return (
//         <a href="http://wwww.baidu.com" onClick={handlerClick} >点我</a>
//     )
// }


//setState()修改状态
//状态可变的
//语法: this.setState({要修改的数据})
//注意: 不要直接修改state中的值 这是错误的
//setState() 作用:1.修改state 2.更新UI
//思想:数据驱动视图

class MyState extends React.Component {
    // constructor(){
    //     super()
    //     // 初始化 state
    //     this.state={
    //         count:0,
    //         name:"张三",
    //         age:25
    //     }
    // }

    //简化
    state = {
        count: 2,
        name: "张三",
        age: 24
    }
    hanlderAdd() {
        this.setState({ count: this.state.count + 1 })
    }
    hanlderSub() {
        this.setState({ count: this.state.count - 1 })
    }
    render() {
        return (
            <div>
                这是有状态组件 {this.state.name}
                <br />
                这是一个计数器 {this.state.count}
                <br />
                {/* <button onClick={this.hanlderAdd}>加一</button>
                <button onClick={this.hanlderSub}>减一</button> */}

                <button onClick={() => {
                    this.setState({
                        count: this.state.count +1
                    })
                }}>加一</button>
                <button onClick={() => {
                    this.setState({
                        count: this.state.count -1
                    })
                }}>减一</button>

            </div>
        )
    }
}


// state的基本使用
// 状态即数据
//状态是私有的 只能在组件内部使用




//3 渲染react元素
ReactDOM.render(<MyState />, document.getElementById('root'))
